import { useEffect, useState } from 'react';
import { useDispatch, useSelector, KnowledgeModelState, Link } from 'umi';
import styles from './index.less'; // 启用css module
// // import './index.less';  // 不启用css module
// import classNames from 'classnames';
import { formatDate } from '../../utils/index';
// 推荐阅读
import StickyCardRead from '../../components/stickyCardRead';
// 文章标签
import StickyCardTag from '../../components/stickyCardTag';
// 分享
import Popup from '@/components/Popup/index';
function knowledge() {
  // 通过useSelector获取model数据
  const { knowledge } = useSelector(
    (state: { knowledge: KnowledgeModelState }) => {
      return {
        knowledge: state.knowledge,
      };
    },
  );
  // 通过useDispatch获取dispatch
  const dispatch = useDispatch();

  // 定义分页的状态

  useEffect(() => {
    dispatch({
      type: 'knowledge/getKnowledgeList',
    });
  }, []);

  return (
    <div className={styles.ContentBottom}>
      <div className={styles.left}>
        <div className={styles.leftContent}>
          {knowledge.knowledgeList.map((item) => {
            return (
              <div className={styles.topitems} key={item.id}>
                <div style={{ opacity: 1 }}>
                  <Link
                    key={item.id}
                    className={styles.items}
                    to={`/knowledge/${item.id}`}
                  >
                    <header className={styles.head}>
                      <div className={styles.titles}>{item.title}</div>
                      <div>
                        <div className={styles.divider}></div>
                        <span style={{ color: '#8590a6' }}>
                          <time>{formatDate(item.updateAt)}</time>
                        </span>
                      </div>
                    </header>
                  </Link>
                  <main style={{marginTop:"12px",display: 'flex'}}>
                    <Link
                      key={item.id}
                      className={styles.items}
                      to={`/knowledge/${item.id}`}
                    >
                      <div className={styles.imgs}>
                        <img src={item.cover} alt="" />
                      </div>
                    </Link>
                    <div className={styles.summa}>
                      <Link
                        key={item.id}
                        className={styles.items}
                        to={`/knowledge/${item.id}`}
                      >
                        <div className={styles.summary}>{item.summary}</div>
                      </Link>
                      <div className={styles.share}>
                        <span
                          role="img"
                          aria-label="eye"
                          className={styles.anticon}
                        >
                          <svg
                            viewBox="64 64 896 896"
                            focusable="false"
                            data-icon="eye"
                            width="1em"
                            height="1em"
                            fill="currentColor"
                            aria-hidden="true"
                          >
                            <path d="M942.2 486.2C847.4 286.5 704.1 186 512 186c-192.2 0-335.4 100.5-430.2 300.3a60.3 60.3 0 000 51.5C176.6 737.5 319.9 838 512 838c192.2 0 335.4-100.5 430.2-300.3 7.7-16.2 7.7-35 0-51.5zM512 766c-161.3 0-279.4-81.8-362.7-254C232.6 339.8 350.7 258 512 258c161.3 0 279.4 81.8 362.7 254C791.5 684.2 673.4 766 512 766zm-4-430c-97.2 0-176 78.8-176 176s78.8 176 176 176 176-78.8 176-176-78.8-176-176-176zm0 288c-61.9 0-112-50.1-112-112s50.1-112 112-112 112 50.1 112 112-50.1 112-112 112z"></path>
                          </svg>
                          <span className={styles.watch}>{item.views}</span>
                        </span>
                        <span className={styles.point}>·</span>
                        <span>
                          <span className={styles.spans}>
                            <span
                              role="img"
                              aria-label="share-alt"
                              className={styles.anticon}
                            >
                              <svg
                                viewBox="64 64 896 896"
                                focusable="false"
                                data-icon="share-alt"
                                width="1em"
                                height="1em"
                                fill="currentColor"
                                aria-hidden="true"
                              >
                                <path d="M752 664c-28.5 0-54.8 10-75.4 26.7L469.4 540.8a160.68 160.68 0 000-57.6l207.2-149.9C697.2 350 723.5 360 752 360c66.2 0 120-53.8 120-120s-53.8-120-120-120-120 53.8-120 120c0 11.6 1.6 22.7 4.7 33.3L439.9 415.8C410.7 377.1 364.3 352 312 352c-88.4 0-160 71.6-160 160s71.6 160 160 160c52.3 0 98.7-25.1 127.9-63.8l196.8 142.5c-3.1 10.6-4.7 21.8-4.7 33.3 0 66.2 53.8 120 120 120s120-53.8 120-120-53.8-120-120-120zm0-476c28.7 0 52 23.3 52 52s-23.3 52-52 52-52-23.3-52-52 23.3-52 52-52zM312 600c-48.5 0-88-39.5-88-88s39.5-88 88-88 88 39.5 88 88-39.5 88-88 88zm440 236c-28.7 0-52-23.3-52-52s23.3-52 52-52 52 23.3 52 52-23.3 52-52 52z"></path>
                              </svg>
                            </span>
                            <Popup ProputItem={item}></Popup>
                          </span>
                        </span>
                      </div>
                    </div>
                  </main>
                </div>
              </div>
            );
          })}
        </div>
      </div>
      <div className={styles.right}>
        <StickyCardRead></StickyCardRead>
        <StickyCardTag></StickyCardTag>
      </div>
    </div>
  );
}

export default knowledge;
